
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>商城</title>
    <script src="/js/store/rem.js"></script>
    <link href="/css/stroe/iconfont.css" rel="stylesheet">
    <link href="/css/stroe/mui.min.css" rel="stylesheet">
    <link href="/css/stroe/all.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/css/stroe/base.css"/>
    <link rel="stylesheet" type="text/css" href="/css/stroe/style.css"/>
    <script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
    <script src="/js/store/fastclick.js"></script>
    <script src="/js/store/mui.min.js"></script>
    <script type="text/javascript" src="/js/store/hmt.js"></script>
    <link rel="stylesheet" href="/js/store/swiper/swiper.min.css">
    <script src="/js/store/swiper/swiper.jquery.min.js"></script>
    <script src="/js/store/global.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script type="text/javascript">
        $(window).load(function(){
            $(".loading").addClass("loader-chanage")
            $(".loading").fadeOut(300)
        });
        $(function () {
            var users = sessionStorage.getItem("user");
            var user = JSON.parse(users);
            var params = getParams();
            if (params.id){
                $.get("/commoditys/"+params.id+"/details",function (data) {
                    $("#detail").renderValues(data);
                    $(".fixed-footer").renderValues(data,{
                        'setHr': function (item, value) {
                            $(item).attr("href", $(item).attr("href") + value)
                        }
                    });
                    $.get("/commoditys/" + data.status, function (data) {
                        $("#noemal").renderValues(data, {
                            'setHref': function (item, value) {
                                $(item).attr("href", $(item).attr("href") + value)
                            }
                        })
                    });
                })
                $("#carts").click(function () {
                    $.post("/buys/"+params.id+"/"+user.id+"/"+3,function (data) {
                        if (data.success){
                            window.location.href = "/mine/store/storeHome.html";
                        }else {
                            $(document).dialog({
                                autoClose: 2500,
                                content: data.msg
                            });
                        }
                    })
                })
            }
        })
    </script>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
<body>
<header class="detail-header fixed-header">
    <a href="javascript:history.go(-1)"><img src="/img/store/detail-left.png"/></a>

    <a href="shopcar.html" class="right"><img src="/img/store/shopbar.png"/></a>
</header>


<div class="contaniner fixed-contb">
    <section class="detail">
        <div id="detail">
        <figure class="swiper-container">
            <ul class="swiper-wrapper">
                <li class="swiper-slide">
                    <a href="#">
                        <img render-src="picture"/>
                    </a>
                </li>
            </ul>
            <div class="swiper-pagination">
            </div>
        </figure>
        <dl class="jiage">
            <dt>
                <h3 render-html="name"></h3>
                <div class="collect">
                    <img src="/img/store/detail-heart-hei.png"/>
                    <p>收藏</p>
                </div>
            </dt>
            <dd>
                <b render-html="discountPrice"></b>
                <del render-html="price"></del>
                <input type="button" value="￥9.5包邮" readonly />
                <small>+356积分</small>
            </dd>
        </dl>

        <div class="chose">
            <ul>
                <h3>颜色</h3>
                <li render-html="color">
                    黑色
                </li>
            </ul>
            <ul>
                <h3>尺寸</h3>
                <li render-html="size">
                    L
                </li>
            </ul>
        </div>
        </div>

        <a href="#" class="seven">
            <b>7</b>天无理由退换货
            <span id="sss"></span>
        </a>
        <div id="noemal">
        <ul class="same">
            <span>
                同类推荐
            </span>
            <div render-loop="list">
            <a href="detail.html?id=" render-fun="setHref" render-key="list.id">
                <li class="one">
                    <img render-src="list.picture"/>
                    <p render-html="list.price"></p>
                </li>
            </a>
            </div>
        </ul>
        </div>

        <article class="detail-article">
            <nav>
                <ul class="article">
                    <li id="talkbox1" class="article-active">商品详情</li>
                    <li id="talkbox2">评价</li>
                </ul>
            </nav>

            <section class="talkbox1">
                这就是爱
            </section>

            <section class="talkbox2" style="display: none;">
                <ul class="talk">
                    <li>
                        <figure><img src="/img/store/detail-tou.png"/></figure>
                        <dl>
                            <dt>
                                <p>瑾晨</p>
                                <time>2015.11.17</time>
                                <div class="star">
                                    <span><img src="/img/store/detail-iocn01.png"/></span>
                                    <span><img src="/img/store/detail-iocn01.png"/></span>
                                    <span><img src="/img/store/detail-iocn01.png"/></span>
                                    <span><img src="/img/store/detail-iocn01.png"/></span>
                                    <span><img src="/img/store/detail-iocn01.png"/></span>
                                </div>
                            </dt>
                            <dd>哎哟不错哦，很性感哦！</dd>
                            <small>颜色：豹纹凯特</small>
                        </dl>
                    </li>
                </ul>
            </section>

        </article>
    </section>
</div>


<footer class="detail-footer fixed-footer">
    <a href="stroeCart.html?id=" render-fun="setHr" render-key="id" class="go-car">
        <input type="button" value="加入购物车" id="carts"/>
    </a>
    <a href="buy.html?id=" render-fun="setHr" render-key="id" class="buy">
        立即购买
    </a>
</footer>

<script type="text/javascript">
    $(window).scroll(function() {
        if ($(".detail-header").offset().top > 50) {
            $(".detail-header").addClass("change");
        } else {
            $(".detail-header").removeClass("change");
        }
    });
</script>
<script type="text/javascript">
    $(document).ready(function(){
        var mySwiper = new Swiper('.swiper-container',{
            loop: true,
            speed:1000,
            autoplay: 2000,
            pagination: '.swiper-pagination',
        });
    })
</script>
<script type="text/javascript">
    $(function(){
        $('.chose li').click(function(){

            $(this).addClass('chose-active').siblings().removeClass('chose-active');

            var tags=document.getElementsByClassName('chose-active');//获取标签

            var tagArr = "";
            for(var i=0;i < tags.length; i++)
            {
                tagArr += tags[i].innerHTML;//保存满足条件的元素

            }

            $('#sss').html(tagArr);

        });

        $('.article li').click(function(){

            $(this).addClass('article-active').siblings().removeClass('article-active');
            if($(this).attr("id")=="talkbox1"){
                $('.talkbox1').show();
                $('.talkbox2').hide();
            }else{
                $('.talkbox2').show();
                $('.talkbox1').hide();
            }

        });
    });
</script>
</body>
</html>